<template>
    <div v-loading="loading">

        <!-- 1 查询人员 -->
        <div v-if="type===1" style="margin-top: 20%; ">

            <div style="margin-left: 20%;">
                <el-input placeholder="请输入待查询人员ID" v-model="searchUserId" style="margin-bottom: 18px; width: 80%"/>

                <el-button type="info" size="small" style="width: 80%;"
                           @click.native="ifQueryEntrance(1)">点击查询
                </el-button>
            </div>

            <hr style="margin-top: 20px; margin-bottom: 20px; ">

            <el-form :model="userData" ref="userData" class="demo-ruleForm" v-if="queryEntrance">

                <el-form-item label="镇名:" label-width="100px">
                    <el-input style="width: 80%" readonly placeholder="请输入镇名" v-model="userData.country"/>
                </el-form-item>
                <el-form-item label="村名:" label-width="100px">
                    <el-input style="width: 80%" readonly placeholder="请输入村名" v-model="userData.village"/>
                </el-form-item>
                <el-form-item label="姓名:" label-width="100px">
                    <el-input style="width: 80%" readonly placeholder="请输入姓名" v-model="userData.name"/>
                </el-form-item>
                <el-form-item label="性别:" label-width="100px">
                    <el-input style="width: 80%" readonly placeholder="请输入性别" v-model="userData.sex"/>
                </el-form-item>
                <el-form-item label="身份证:" label-width="100px">
                    <el-input style="width: 80%" readonly placeholder="请输入身份证" v-model="userData.idNum"/>
                </el-form-item>

                <el-form-item label="说明:" label-width="100px">
                    <el-input placeholder="请输入说明" v-model="explain" style="width: 80%;"/>
                </el-form-item>

                <hr style="margin-top: 20px; margin-bottom: 20px; ">

                <el-form-item label="镇名:" label-width="100px">
                    <el-input placeholder="请输入要修改的镇名" v-model="country" style="width: 80%;"/>
                </el-form-item>

                <el-form-item label="村名:" label-width="100px">
                    <el-input placeholder="请输入要修改的村名" v-model="village" style="width: 80%;"/>
                </el-form-item>

                <el-button type="warning" size="small" plain style="margin-left: 10%;width: 80%;margin-bottom: 18px"
                           @click.native="ifQueryEntrance(0)">人员信息不符 - 终止
                </el-button>
                <el-button type="primary" size="small" style="margin-left: 10%;width: 80%;margin-bottom: 18px"
                           @click.native="openDialogIfEditor()">继 续
                </el-button>

            </el-form>


            <!--提示框-->
            <el-dialog :visible.sync="dialogIfEditor" width="90%">
                <span>该用户已经填过信息是否重新修改?</span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogIfEditor = false">取 消</el-button>
                    <el-button type="primary" @click="typeAdd()">确 定</el-button>
                  </span>
            </el-dialog>

        </div>

        <!-- 2 入户评估 -->
        <div v-if="type===2">

            <div class="title_div"><p class="title_P">入户评估</p></div>

            <div style="text-align:center;">

                <el-row style="margin-bottom: 10px">
                    <el-col :span="8"><p>评估指标</p></el-col>
                    <el-col :span="5"><p>独立完成</p></el-col>
                    <el-col :span="5"><p>需要帮助</p></el-col>
                    <el-col :span="5"><p>完全依赖</p></el-col>
                </el-row>

                <el-row style="margin-bottom: 10px">
                    <el-col :span="8"><p>自主吃饭</p></el-col>
                    <el-col :span="5">
                        <el-radio v-model="freedomData.eat" label="独立完成">&nbsp;</el-radio>
                    </el-col>
                    <el-col :span="5">
                        <el-radio v-model="freedomData.eat" label="需要帮助">&nbsp;</el-radio>
                    </el-col>
                    <el-col :span="5">
                        <el-radio v-model="freedomData.eat" label="完全依赖">&nbsp;</el-radio>
                    </el-col>
                </el-row>

                <el-row style="margin-bottom: 10px">
                    <el-col :span="8">
                        <p>自主穿衣</p>
                    </el-col>
                    <el-col :span="5">
                        <el-radio v-model="freedomData.dressing" label="独立完成">&nbsp;</el-radio>
                    </el-col>
                    <el-col :span="5">
                        <el-radio v-model="freedomData.dressing" label="需要帮助">&nbsp;</el-radio>
                    </el-col>
                    <el-col :span="5">
                        <el-radio v-model="freedomData.dressing" label="完全依赖">&nbsp;</el-radio>
                    </el-col>
                </el-row>

                <el-row style="margin-bottom: 10px">
                    <el-col :span="8">
                        <p>自主上下床</p>
                    </el-col>
                    <el-col :span="5">
                        <el-radio v-model="freedomData.bunkBed" label="独立完成">&nbsp;</el-radio>
                    </el-col>
                    <el-col :span="5">
                        <el-radio v-model="freedomData.bunkBed" label="需要帮助">&nbsp;</el-radio>
                    </el-col>
                    <el-col :span="5">
                        <el-radio v-model="freedomData.bunkBed" label="完全依赖">&nbsp;</el-radio>
                    </el-col>
                </el-row>

                <el-row style="margin-bottom: 10px">
                    <el-col :span="8">
                        <p>自主如厕</p>
                    </el-col>
                    <el-col :span="5">
                        <el-radio v-model="freedomData.visitJohn" label="独立完成">&nbsp;</el-radio>
                    </el-col>
                    <el-col :span="5">
                        <el-radio v-model="freedomData.visitJohn" label="需要帮助">&nbsp;</el-radio>
                    </el-col>
                    <el-col :span="5">
                        <el-radio v-model="freedomData.visitJohn" label="完全依赖">&nbsp;</el-radio>
                    </el-col>
                </el-row>

                <el-row style="margin-bottom: 10px">
                    <el-col :span="8">
                        <p>自主行走</p>
                    </el-col>
                    <el-col :span="5">
                        <el-radio v-model="freedomData.walk" label="独立完成">&nbsp;</el-radio>
                    </el-col>
                    <el-col :span="5">
                        <el-radio v-model="freedomData.walk" label="需要帮助">&nbsp;</el-radio>
                    </el-col>
                    <el-col :span="5">
                        <el-radio v-model="freedomData.walk" label="完全依赖">&nbsp;</el-radio>
                    </el-col>
                </el-row>

                <el-row style="margin-bottom: 10px">
                    <el-col :span="8">
                        <p>自主洗澡</p>
                    </el-col>
                    <el-col :span="5">
                        <el-radio v-model="freedomData.takeBath" label="独立完成">&nbsp;</el-radio>
                    </el-col>
                    <el-col :span="5">
                        <el-radio v-model="freedomData.takeBath" label="需要帮助">&nbsp;</el-radio>
                    </el-col>
                    <el-col :span="5">
                        <el-radio v-model="freedomData.takeBath" label="完全依赖">&nbsp;</el-radio>
                    </el-col>
                </el-row>

            </div>

            <hr style="margin-top: 30px; margin-bottom: 30px;">

            <div style="margin-left: 8%">
                <p style="margin-bottom: 10px">评估结论:</p>

                <div style="margin-left: 20%;margin-bottom: 10px">
                    <el-radio v-model="freedomData.verdict" label="完全具备 生活能力" border size="mini"
                              style="width: 80%"></el-radio>
                </div>
                <div style="margin-left: 20%;margin-bottom: 10px">
                    <el-radio v-model="freedomData.verdict" label="部分丧失 生活能力" border size="mini"
                              style="width: 80%"></el-radio>
                </div>
                <div style="margin-left: 20%;margin-bottom: 10px">
                    <el-radio v-model="freedomData.verdict" label="完全丧失 生活能力" border size="mini"
                              style="width: 80%"></el-radio>
                </div>
            </div>


            <div class="div_button">
                <el-button type="warning" size="small" plain style="margin-left: 15%;width: 30%;"
                           @click.native="typeReduce()">操作终止
                </el-button>

                <el-button type="primary" size="small" style="margin-left: 10%;width: 30%;"
                           @click.native="typeAdd()">下一页<i class="el-icon-arrow-right el-icon--right"></i>
                </el-button>
            </div>

        </div>

        <!-- 3 表单填写-->
        <div v-if="type===3">

            <el-row>
                <div class="title_div"><p class="title_P">护理情况</p></div>

                <el-form :model="research" ref="research" class="demo-ruleForm">

                    <el-form-item label="残疾状况:" label-width="100px"><!--TODO-->
                        <el-radio v-model="research.disabilityState" label="是" border size="mini" style="width: 80px"/>
                        <el-radio v-model="research.disabilityState" label="否" border size="mini" style="width: 80px"/>
                    </el-form-item>
                    <el-form-item label="类型:" label-width="100px"><!--TODO-->
                        <el-input placeholder="请输入类型" v-model="research.disabilityType" size="mini" style="width: 80%"/>
                    </el-form-item>
                    <el-form-item label="等级:" label-width="100px"><!--TODO-->
                        <el-input placeholder="请输入等级" v-model="research.disabilityGrade" size="mini"
                                  style="width: 80%"/>
                    </el-form-item>
                    <el-form-item label="护理协议:" label-width="100px">
                        <el-col :span="10">
                            <el-radio v-model="research.nursingProtocol" border size="mini" label="已签订"/>
                        </el-col>
                        <el-col :span="10">
                            <el-radio v-model="research.nursingProtocol" border size="mini" label="未签订"/>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="低保补贴享受时间(年/月)：" style="margin-left: 20px"><!--TODO-->
                        <el-input placeholder="请输入低保补贴享受时间(年/月)" v-model="research.lowSubsidyTime"
                                  style="width: 60%;margin-left: 80px"/>
                    </el-form-item>
                    <el-form-item label="失能补贴发放时间(年/月):" style="margin-left: 20px" v-if="this.selfCare !==1 ">
                        <!--TODO-->
                        <el-input placeholder="请输入失能补贴发放时间(年/月)" v-model="research.disabilitySubsidyTime"
                                  style="width: 60%;margin-left: 80px"/>
                    </el-form-item>
                    <el-form-item label="照顾护理标准:" label-width="100px" v-if="this.selfCare !==1 ">
                        <el-col :span="10">
                            <el-radio v-model="research.standardsCare" border size="mini" label="全护理">全护理</el-radio>
                        </el-col>
                        <el-col :span="10">
                            <el-radio v-model="research.standardsCare" border size="mini" label="半护理">半护理</el-radio>
                        </el-col>
                    </el-form-item>
                </el-form>
            </el-row>


            <el-row style="margin-top: 10px" v-if="this.selfCare !==1 ">
                <div class="title_div"><p class="title_P">街道干部信息</p></div>

                <el-form :model="research" ref="research" class="demo-ruleForm">
                    <el-form-item label="姓名:" label-width="100px">
                        <el-input placeholder="请输入街道干部姓名" v-model="research.scName" style="width: 80%"/>
                    </el-form-item>
                    <el-form-item label="性别:" label-width="100px">
                        <el-radio v-model="research.scSex" label="男" border size="mini" style="width: 32%;">男</el-radio>
                        <el-radio v-model="research.scSex" label="女" border size="mini" style="width: 32%;">女</el-radio>
                    </el-form-item>
                    <el-form-item label="职务:" label-width="100px">
                        <el-input placeholder="请输入街道干部职务" v-model="research.scDuty" style="width: 80%"/>
                    </el-form-item>
                    <el-form-item label="电话:" label-width="100px">
                        <el-input placeholder="请输入街道干部电话" v-model="research.scPhone" style="width: 80%"/>
                    </el-form-item>
                </el-form>
            </el-row>

            <el-row style="margin-top: 10px">
                <div class="title_div"><p class="title_P">照护人信息: </p></div>

                <el-form :model="research" ref="research" class="demo-ruleForm">
                    <el-form-item label="姓名:" label-width="100px">
                        <el-input placeholder="请输入照护人姓名" v-model="research.tcpName" style="width: 80%"/>
                    </el-form-item>
                    <el-form-item label="性别:" label-width="100px">
                        <el-radio v-model="research.tcpSex" label="男" border size="mini" style="width: 32%;">男
                        </el-radio>
                        <el-radio v-model="research.tcpSex" label="女" border size="mini" style="width: 32%;">女
                        </el-radio>
                    </el-form-item>
                    <el-form-item label="关系:" label-width="100px">
                        <el-input placeholder="请输入照护人关系" v-model="research.tcpRelation" style="width: 80%"/>
                    </el-form-item>
                    <el-form-item label="电话:" label-width="100px">
                        <el-input placeholder="请输入照护人电话" v-model="research.tcpPhone" style="width: 80%"/>
                    </el-form-item>
                    <el-form-item label="情况:" label-width="100px">
                        <div>
                            <el-checkbox v-model="research.tcpCondition1" label="提供三餐" style="width: 80%" border/>
                        </div>
                        <div>
                            <el-checkbox v-model="research.tcpCondition2" label="帮助洗澡" style="width: 80%" border/>
                        </div>
                        <div>
                            <el-checkbox v-model="research.tcpCondition3" label="帮助洗衣" style="width: 80%" border/>
                        </div>
                        <div>
                            <el-checkbox v-model="research.tcpCondition4" label="帮助打扫卫生" style="width: 80%" border/>
                        </div>
                        <div>
                            <el-checkbox v-model="research.tcpCondition5" label="帮助就医" style="width: 80%" border/>
                        </div>
                    </el-form-item>
                </el-form>
            </el-row>

            <el-row style="margin-top: 10px">
                <div class="title_div"><p class="title_P">健康情况</p></div>

                <el-form :model="research" ref="research" class="demo-ruleForm">
                    <el-form-item label="患者:" label-width="100px">
                        <el-radio v-model="research.pc" label="有" border size="mini" style="width: 32%;"/>
                        <el-radio v-model="research.pc" label="无" border size="mini" style="width: 32%;"/>

                        <el-input placeholder="请输入健康状况备注信息" v-model="research.pcMessage"
                                  type="textarea" :rows="2" style="width: 80%"/>
                    </el-form-item>
                </el-form>
            </el-row>

            <el-row style="margin-top: 10px" v-if="this.selfCare !==1 ">
                <div class="title_div"><p class="title_P">自理能力</p></div>

                <el-form :model="research" ref="research" class="demo-ruleForm">
                    <el-form-item label="自理能力:" label-width="100px">
                        <div>
                            <el-radio v-model="research.sca" label="瘫痪在床" border size="mini"/>
                        </div>
                        <div>
                            <el-radio v-model="research.sca" label="有一定自理能力" border size="mini"/>
                        </div>
                        <div>
                            <el-radio v-model="research.sca" label="可以自理" border size="mini"/>
                        </div>
                        <el-input placeholder="请输入自理能力备注信息" v-model="research.scaMessage" size="mini"
                                  type="textarea" :rows="2" style="width: 80%"/>

                    </el-form-item>
                </el-form>
            </el-row>

            <el-row style="margin-top: 10px">
                <div class="title_div"><p class="title_P">居住情况</p></div>

                <el-row style="margin-left: 20%">
                    <el-col :span="10">
                        <el-radio v-model="research.livingSituation" label="安全" border size="mini"/>
                    </el-col>
                    <el-col :span="10">
                        <el-radio v-model="research.livingSituation" label="不安全" border size="mini"/>
                    </el-col>
                </el-row>
            </el-row>

            <el-row style="margin-top: 10px">
                <div class="title_div"><p class="title_P">卫生情况</p></div>

                <el-row style="margin-left: 5%">
                    <el-col :span="8">
                        <el-radio v-model="research.hygieneStatus" label="整洁卫生" border size="mini"
                                  style="width: 100px"/>
                    </el-col>
                    <el-col :span="8">
                        <el-radio v-model="research.hygieneStatus" label="一般" border size="mini" style="width: 100px"/>
                    </el-col>
                    <el-col :span="8">
                        <el-radio v-model="research.hygieneStatus" label="脏乱差" border size="mini" style="width: 100px"/>
                    </el-col>
                </el-row>
            </el-row>

            <el-row style="margin-top: 10px">
                <div class="title_div"><p class="title_P">入住养老院意愿</p></div>

                <el-row style="margin-left: 5%">
                    <el-col :span="8">
                        <el-radio v-model="research.checkInStatus" label="愿意" border size="mini" style="width: 100px"/>
                    </el-col>
                    <el-col :span="8">
                        <el-radio v-model="research.checkInStatus" label="不愿意" border size="mini" style="width: 100px"/>
                    </el-col>
                    <el-col :span="8">
                        <el-radio v-model="research.checkInStatus" label="其他" border size="mini" style="width: 100px"/>
                    </el-col>
                </el-row>

                <hr style="margin-top: 30px; margin-bottom: 30px; ">

                <el-form :model="research" ref="research" class="demo-ruleForm">
                    <el-form-item label="说明:" label-width="100px">
                        <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="research.checkInStatusMessage"
                                  style="width: 80%;"/>
                    </el-form-item>
                    <el-form-item label="本人电话:" label-width="100px"><!--TODO-->
                        <el-input placeholder="请输入本人电话" v-model="research.myPhone" style="width: 80%;"/>
                    </el-form-item>
                </el-form>
            </el-row>


            <div class="div_button">
                <el-button type="primary" size="small" style="margin-left: 15%;width: 30%;"
                           @click.native="typeReduce()" icon="el-icon-arrow-left">上一页
                </el-button>

                <el-button type="primary" size="small" style="margin-left: 10%;width: 30%;"
                           @click.native="typeAdd()">下一页<i class="el-icon-arrow-right el-icon--right"></i>
                </el-button>
            </div>

        </div>

        <!-- 4 上传图片 -->
        <div v-if="type===4">
            <div class="title_div"><p class="title_P">被访问人家境照片</p></div>

            <el-form :model="research" ref="research" class="demo-ruleForm">

                <el-form-item label="大门:" label-width="80px" v-if="!imgType1">
                    <el-upload class="avatar-uploader"
                               list-type="picture-card"
                               accept="image/jpeg,image/gif,image/png,image/bmp"
                               :action="imgUpload"
                               :data="imgData"
                               :file-list="imgTypeData1"
                               :before-upload="beforeUpload"
                               :on-success="handleSuccess"
                               :on-preview="handlePictureCardPreview"
                               :on-remove="handleRemove"
                               style="margin-left: 10%;">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="大门:" label-width="80px" v-if="imgType1">
                    <el-button class="form_button2" type="primary" size="mini" plain
                               @click="switchButton(1)">点击切换详情
                    </el-button>
                </el-form-item>

                <el-form-item label="身份证:" label-width="80px" v-if="!imgType2">
                    <el-upload class="avatar-uploader"
                               list-type="picture-card"
                               accept="image/jpeg,image/gif,image/png,image/bmp"
                               :action="imgUpload"
                               :data="imgData"
                               :file-list="imgTypeData2"
                               :before-upload="beforeUpload"
                               :on-success="handleSuccess"
                               :on-preview="handlePictureCardPreview"
                               :on-remove="handleRemove"
                               style="margin-left: 10%;">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="身份证:" label-width="80px" v-if="imgType2">
                    <el-button class="form_button2" type="primary" size="mini" plain
                               @click="switchButton(2)">点击切换详情
                    </el-button>
                </el-form-item>

                <el-form-item label="户口本:" label-width="80px" v-if="!imgType3">
                    <el-upload class="avatar-uploader"
                               list-type="picture-card"
                               accept="image/jpeg,image/gif,image/png,image/bmp"
                               :action="imgUpload"
                               :data="imgData"
                               :file-list="imgTypeData3"
                               :before-upload="beforeUpload"
                               :on-success="handleSuccess"
                               :on-preview="handlePictureCardPreview"
                               :on-remove="handleRemove"
                               style="margin-left: 10%;">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="户口本:" label-width="80px" v-if="imgType3">
                    <el-button class="form_button2" type="primary" size="mini" plain
                               @click="switchButton(3)">点击切换详情
                    </el-button>
                </el-form-item>

                <el-form-item label="残疾证:" label-width="80px" v-if="!imgType4">
                    <el-upload class="avatar-uploader"
                               list-type="picture-card"
                               accept="image/jpeg,image/gif,image/png,image/bmp"
                               :action="imgUpload"
                               :data="imgData"
                               :file-list="imgTypeData4"
                               :before-upload="beforeUpload"
                               :on-success="handleSuccess"
                               :on-preview="handlePictureCardPreview"
                               :on-remove="handleRemove"
                               style="margin-left: 10%;">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="残疾证:" label-width="80px" v-if="imgType4">
                    <el-button class="form_button2" type="primary" size="mini" plain
                               @click="switchButton(4)">点击切换详情
                    </el-button>
                </el-form-item>

                <el-form-item label="被访问人:" label-width="80px" v-if="!imgType5">
                    <el-upload class="avatar-uploader"
                               list-type="picture-card"
                               accept="image/jpeg,image/gif,image/png,image/bmp"
                               :action="imgUpload"
                               :data="imgData"
                               :file-list="imgTypeData5"
                               :before-upload="beforeUpload"
                               :on-success="handleSuccess"
                               :on-preview="handlePictureCardPreview"
                               :on-remove="handleRemove"
                               style="margin-left: 10%;">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="被访问人:" label-width="80px" v-if="imgType5">
                    <el-button class="form_button2" type="primary" size="mini" plain
                               @click="switchButton(5)">点击切换详情
                    </el-button>
                </el-form-item>

                <el-form-item label="厨房:" label-width="80px" v-if="!imgType6">
                    <el-upload class="avatar-uploader"
                               list-type="picture-card"
                               accept="image/jpeg,image/gif,image/png,image/bmp"
                               :action="imgUpload"
                               :data="imgData"
                               :file-list="imgTypeData6"
                               :before-upload="beforeUpload"
                               :on-success="handleSuccess"
                               :on-preview="handlePictureCardPreview"
                               :on-remove="handleRemove"
                               style="margin-left: 10%;">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="厨房:" label-width="80px" v-if="imgType6">
                    <el-button class="form_button2" type="primary" size="mini" plain
                               @click="switchButton(6)">点击切换详情
                    </el-button>
                </el-form-item>

                <el-form-item label="居住环境:" label-width="80px" v-if="!imgType7">
                    <el-upload class="avatar-uploader"
                               list-type="picture-card"
                               accept="image/jpeg,image/gif,image/png,image/bmp"
                               :action="imgUpload"
                               :data="imgData"
                               :file-list="imgTypeData7"
                               :before-upload="beforeUpload"
                               :on-success="handleSuccess"
                               :on-preview="handlePictureCardPreview"
                               :on-remove="handleRemove"
                               style="margin-left: 10%;">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="居住环境:" label-width="80px" v-if="imgType7">
                    <el-button class="form_button2" type="primary" size="mini" plain
                               @click="switchButton(7)">点击切换详情
                    </el-button>
                </el-form-item>

                <el-form-item label="照料协议:" label-width="80px" v-if="!imgType8">
                    <el-upload class="avatar-uploader"
                               list-type="picture-card"
                               accept="image/jpeg,image/gif,image/png,image/bmp"
                               :action="imgUpload"
                               :data="imgData"
                               :file-list="imgTypeData8"
                               :before-upload="beforeUpload"
                               :on-success="handleSuccess"
                               :on-preview="handlePictureCardPreview"
                               :on-remove="handleRemove"
                               style="margin-left: 10%;">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="照料协议:" label-width="80px" v-if="imgType8">
                    <el-button class="form_button2" type="primary" size="mini" plain
                               @click="switchButton(8)">点击切换详情
                    </el-button>
                </el-form-item>


                <el-dialog :visible.sync="dialogVisible" width="90%">
                    <img style="width: 100%;height: 100%" :src="dialogImageUrl" alt="">
                </el-dialog>

                <el-row style="text-align:center;margin-top: 20px">
                    <el-col :span="12">
                        <p style="margin-bottom: 10px">评估表照片</p>
                        <el-upload class="avatar-uploader"
                                   :action="imgUpload"
                                   :data="imgData"
                                   :show-file-list="false"
                                   :on-success="handleSuccess1"
                                   :before-upload="beforeUpload1">
                            <img v-if="imgTypeData9.url" :src="imgTypeData9.url" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-col>
                    <el-col :span="12">
                        <p style="margin-bottom: 10px">护理表图片</p>
                        <el-upload class="avatar-uploader"
                                   :action="imgUpload"
                                   :data="imgData"
                                   :show-file-list="false"
                                   :on-success="handleSuccess2"
                                   :before-upload="beforeUpload1">
                            <img v-if="imgTypeData10.url" :src="imgTypeData10.url" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-col>
                </el-row>


                <div class="div_button">
                    <el-button type="primary" size="small" style="margin-left: 15%;width: 30%;"
                               @click.native="typeReduce()" icon="el-icon-arrow-left">上一页
                    </el-button>

                    <el-button type="success" size="small" style="margin-left: 10%;width: 30%;"
                               @click.native="submitQuestionnaire()">提交问卷
                    </el-button>
                </div>


            </el-form>
        </div>

    </div>
</template>


<script>

    import {getToken} from "../utils/dataStorage";
    import {GetUserApi, SaveUserResearchApi, UserMessageDiscrepancyApi} from "../api/api";

    export default {
        data() {
            return {
                //  公共 属性
                type: 1,

                //  1
                searchUserId: "",   //  用户id
                selfCare: "",       //  自理能力
                explain: "",        //  说明备注
                country: "",        //  镇名
                village: "",        //  村名


                queryEntrance: false,
                userData: {},
                ifEditor: false,
                dialogIfEditor: false,

                //  2 ->
                freedomData: {
                    eat: "",
                    dressing: "",
                    bunkBed: "",
                    visitJohn: "",
                    walk: "",
                    takeBath: "",
                    verdict: "",
                },

                //  3 ->
                research: {
                    nursingProtocol: "",
                    standardsCare: "",
                    tcpName: "",
                    tcpSex: "",
                    tcpRelation: "",
                    tcpPhone: "",
                    tcpCondition1: false,
                    tcpCondition2: false,
                    tcpCondition3: false,
                    tcpCondition4: false,
                    tcpCondition5: false,

                    scName: "",
                    scSex: "",
                    scDuty: "",
                    scPhone: "",

                    pc: "",
                    pcMessage: "",

                    sca: "",
                    scaMessage: "",

                    livingSituation: "",
                    hygieneStatus: "",
                    checkInStatus: "",
                    checkInStatusMessage: "",

                    disabilityState: "",
                    disabilityType: "",
                    disabilityGrade: "",
                    lowSubsidyTime: "",
                    disabilitySubsidyTime: "",
                    myPhone: "",
                },

                //  4 -> 上传图片
                imgUpload: 'http://49.235.128.144:8081/upload',
                imgData: {
                    userId: ""
                },
                dialogVisible: false,   //  图片详情窗口
                dialogImageUrl: '',     //  图片详情


                //  图片上传显示窗口
                imgType1: false,
                imgType2: true,
                imgType3: true,
                imgType4: true,
                imgType5: true,
                imgType6: true,
                imgType7: true,
                imgType8: true,

                //  上传的图片列表
                imgTypeData1: [],
                imgTypeData2: [],
                imgTypeData3: [],
                imgTypeData4: [],
                imgTypeData5: [],
                imgTypeData6: [],
                imgTypeData7: [],
                imgTypeData8: [],

                imgTypeData9: {},
                imgTypeData10: {},

                loading: false

            };
        },
        methods: {
            // 查询人员ID
            ifQueryEntrance(type) { //  type: 1.开 0.关闭
                if (type === 1) {
                    this.userData = {};
                    if (!this.searchUserId) {
                        this.queryEntrance = false;
                        return this.$message({type: 'warning', message: '请输入待查询人员ID', center: true});
                    } else {
                        this.getUser()
                        this.queryEntrance = true;
                        this.explain = "";
                    }
                } else if (type === 0) {
                    if (!this.explain) return this.$message({type: 'warning', message: '请填写说明备注', center: true});
                    this.userMessageDiscrepancy();
                    this.searchUserId = "";
                    this.queryEntrance = false;
                }
            },

            //  获取用户信息
            getUser() {
                GetUserApi({
                    text: this.searchUserId,
                }).then(data => {
                    this.userData = data.data;
                    this.ifEditor = data.ifEditor;
                }).catch(_ => {
                });
            },
            //  人员信息不符 插入备注
            userMessageDiscrepancy() {
                UserMessageDiscrepancyApi({
                    userId: this.searchUserId,
                    explain: this.explain,
                }).then(data => {
                    this.userData = data.data;
                    this.ifEditor = data.ifEditor;
                }).catch(_ => {
                });
            },

            //  是否提交过问卷
            openDialogIfEditor() {
                if (this.ifEditor) {
                    this.dialogIfEditor = true;
                } else {
                    this.typeAdd()
                }
            },

            // type + 1
            typeAdd() {

                if (this.type === 1) {
                    this.imgData.userId = this.userData.id;

                    if (this.userData.selfCare === "有生活自理能力") this.selfCare = 1;
                    else if (this.userData.selfCare === "部分生活自理能力") this.selfCare = 2;
                    else if (this.userData.selfCare === "无生活自理能力") this.selfCare = 3;

                } else if (this.type === 2) {
                    if (!this.freedomData.eat) return this.$message({
                        type: 'warning', message: '请填写自主吃饭选项', center: true
                    });
                    if (!this.freedomData.dressing) return this.$message({
                        type: 'warning', message: '请填写自主穿衣选项', center: true
                    });
                    if (!this.freedomData.bunkBed) return this.$message({
                        type: 'warning', message: '请填写自主上下床选项', center: true
                    });
                    if (!this.freedomData.visitJohn) return this.$message({
                        type: 'warning', message: '请填写自主如厕选项', center: true
                    });
                    if (!this.freedomData.walk) return this.$message({
                        type: 'warning', message: '请填写自主行走选项', center: true
                    });
                    if (!this.freedomData.takeBath) return this.$message({
                        type: 'warning', message: '请填写自主洗澡选项', center: true
                    });
                    if (!this.freedomData.verdict) return this.$message({
                        type: 'warning', message: '请填写评估结论选项', center: true
                    });
                } else if (this.type === 3) {

                    if (!this.research.disabilityState) return this.$message({
                        type: 'warning', message: '请填写入残疾状况', center: true
                    });
                    else if (!this.research.disabilityType) return this.$message({
                        type: 'warning', message: '请填写入残疾类型', center: true
                    });
                    else if (!this.research.disabilityGrade) return this.$message({
                        type: 'warning', message: '请填写入残疾等级', center: true
                    });
                    else if (!this.research.lowSubsidyTime) return this.$message({
                        type: 'warning', message: '请填写入低保补贴享受时间(年/月)', center: true
                    });
                    else if (!this.research.nursingProtocol) return this.$message({
                        type: 'warning', message: '请填写护理协议选项', center: true
                    });
                    else if (!this.research.tcpName) return this.$message({
                        type: 'warning', message: '请输入照护人姓名', center: true
                    });
                    else if (!this.research.tcpSex) return this.$message({
                        type: 'warning', message: '请填写照护人性别选项', center: true
                    });
                    else if (!this.research.tcpRelation) return this.$message({
                        type: 'warning', message: '请输入照护人关系', center: true
                    });
                    else if (!this.research.tcpPhone) return this.$message({
                        type: 'warning', message: '请输入照护人电话', center: true
                    });

                    else if (!this.research.pc) return this.$message({
                        type: 'warning', message: '请填写患者健康情况选项', center: true
                    });
                    else if (!this.research.livingSituation) return this.$message({
                        type: 'warning', message: '请填写居住情况选项', center: true
                    });
                    else if (!this.research.hygieneStatus) return this.$message({
                        type: 'warning', message: '请填写卫生情况选项', center: true
                    });
                    else if (!this.research.checkInStatus) return this.$message({
                        type: 'warning', message: '请填写入住养老院意愿选项', center: true
                    });

                    else if (!this.research.myPhone) return this.$message({
                        type: 'warning', message: '我的电话', center: true
                    });

                    //  额外判断
                    if (this.selfCare !== 1) {
                        if (!this.research.disabilitySubsidyTime) return this.$message({
                            type: 'warning', message: '失能补贴发放时间(年/月)', center: true
                        });
                        else if (!this.research.standardsCare) return this.$message({
                            type: 'warning', message: '请填写护理标准选项', center: true
                        });
                        else if (!this.research.scName) return this.$message({
                            type: 'warning', message: '请输入街道干部姓名', center: true
                        });
                        else if (!this.research.scSex) return this.$message({
                            type: 'warning', message: '请填写街道干部性别选项', center: true
                        });
                        else if (!this.research.scDuty) return this.$message({
                            type: 'warning', message: '请输入街道干部职务', center: true
                        });
                        else if (!this.research.scPhone) return this.$message({
                            type: 'warning', message: '请输入街道干部电话', center: true
                        });
                        else if (!this.research.sca) return this.$message({
                            type: 'warning', message: '请填写自理能力选项', center: true
                        });
                    }
                }

                this.type++;
            },
            // type - 1
            typeReduce() {
                if (this.type === 2) {
                    this.InitializationData();
                } else {
                    this.type--;
                }
            },

            // 提交问卷
            submitQuestionnaire() {

                if (this.imgTypeData1.length === 0) return this.$message({
                    type: 'warning', message: '请上传大门图片', center: true
                });
                else if (this.imgTypeData2.length === 0) return this.$message({
                    type: 'warning', message: '请上传身份证图片', center: true
                });
                else if (this.imgTypeData3.length === 0) return this.$message({
                    type: 'warning', message: '请上传户口本图片', center: true
                });
                else if (this.imgTypeData5.length === 0) return this.$message({
                    type: 'warning', message: '请上传被访问人图片', center: true
                });
                else if (this.imgTypeData6.length === 0) return this.$message({
                    type: 'warning', message: '请上传厨房图片', center: true
                });
                else if (this.imgTypeData7.length === 0) return this.$message({
                    type: 'warning', message: '请上传居住环境图片', center: true
                });
                else if (this.imgTypeData8.length === 0) return this.$message({
                    type: 'warning', message: '请上传照料协议图片', center: true
                });
                else if (!this.imgTypeData9.url) return this.$message({
                    type: 'warning', message: '请填写评估表照片', center: true
                });
                else if (!this.imgTypeData10.url) return this.$message({
                    type: 'warning', message: '请填写护理表图片', center: true
                });

                SaveUserResearchApi({
                    userId: this.imgData.userId,
                    imgTypeData1: this.imgTypeData1,
                    imgTypeData2: this.imgTypeData2,
                    imgTypeData3: this.imgTypeData3,
                    imgTypeData4: this.imgTypeData4,
                    imgTypeData5: this.imgTypeData5,
                    imgTypeData6: this.imgTypeData6,
                    imgTypeData7: this.imgTypeData7,
                    imgTypeData8: this.imgTypeData8,
                    imgTypeData9: this.imgTypeData9,
                    imgTypeData10: this.imgTypeData10,

                    freedomData: this.freedomData,
                    research: this.research,

                    country: this.country,
                    village: this.village,
                }).then(_ => {
                    this.InitializationData();
                    this.$message({type: 'success', message: '表单提交成功', center: true})
                }).catch(_ => {
                });
            },

            // 切换图片详情
            switchButton(type) {
                this.imgType1 = true;
                this.imgType2 = true;
                this.imgType3 = true;
                this.imgType4 = true;
                this.imgType5 = true;
                this.imgType6 = true;
                this.imgType7 = true;
                this.imgType8 = true;

                if (type === 1) this.imgType1 = false;
                else if (type === 2) this.imgType2 = false;
                else if (type === 3) this.imgType3 = false;
                else if (type === 4) this.imgType4 = false;
                else if (type === 5) this.imgType5 = false;
                else if (type === 6) this.imgType6 = false;
                else if (type === 7) this.imgType7 = false;
                else if (type === 8) this.imgType8 = false;
            },

            //  上传图片时的 图片校验
            beforeUpload(file) {
                const isLt2M = file.size / 1024 / 1024 < 50;
                if (!isLt2M) {
                    this.$message({type: 'error', message: '上传头像图片大小不能超过 50MB!', center: true});
                    return false;
                } else if (this.imgTypeData1.length >= 5 || this.imgTypeData2.length >= 5 ||
                    this.imgTypeData3.length >= 5 || this.imgTypeData4.length >= 5 ||
                    this.imgTypeData5.length >= 5 || this.imgTypeData6.length >= 5 ||
                    this.imgTypeData7.length >= 5 || this.imgTypeData8.length >= 5) {
                    this.$message({type: 'warning', message: '最多上传5张图片', center: true});
                    return false;
                }
                return isLt2M;
            },
            //  上传图片时的 图片校验
            beforeUpload1(file) {
                this.loading = true;

                const isLt2M = file.size / 1024 / 1024 < 50;
                if (!isLt2M) {
                    this.$message({type: 'error', message: '上传头像图片大小不能超过 50MB!', center: true});
                    return false;
                }
                return isLt2M;
            },
            // 上传图片成功回调
            handleSuccess(res) {
                if (!this.imgType1) this.imgTypeData1.push(res.data);
                else if (!this.imgType2) this.imgTypeData2.push(res.data);
                else if (!this.imgType3) this.imgTypeData3.push(res.data);
                else if (!this.imgType4) this.imgTypeData4.push(res.data);
                else if (!this.imgType5) this.imgTypeData5.push(res.data);
                else if (!this.imgType6) this.imgTypeData6.push(res.data);
                else if (!this.imgType7) this.imgTypeData7.push(res.data);
                else if (!this.imgType8) this.imgTypeData8.push(res.data);
            },

            // 上传图片成功回调
            handleSuccess1(res) {
                this.loading = false;
                this.imgTypeData9 = res.data;
            },
            // 上传图片成功回调
            handleSuccess2(res) {
                this.loading = false;
                this.imgTypeData10 = res.data;
            },
            //  移除文件列表
            handleRemove(file, fileList) {
                this.imgTypeData1 = this.imgTypeData1.filter(td => td.uid != file.uid);
                this.imgTypeData2 = this.imgTypeData2.filter(td => td.uid != file.uid);
                this.imgTypeData3 = this.imgTypeData3.filter(td => td.uid != file.uid);
                this.imgTypeData4 = this.imgTypeData4.filter(td => td.uid != file.uid);
                this.imgTypeData5 = this.imgTypeData5.filter(td => td.uid != file.uid);
                this.imgTypeData6 = this.imgTypeData6.filter(td => td.uid != file.uid);
                this.imgTypeData7 = this.imgTypeData7.filter(td => td.uid != file.uid);
                this.imgTypeData8 = this.imgTypeData8.filter(td => td.uid != file.uid);
            },
            //  点击查看大图
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            //  初始化数据
            InitializationData() {
                this.dialogIfEditor = false;

                this.type = 1;
                this.queryEntrance = false;
                this.searchUserId = "";
                this.explain = "";
                this.userData = {}

                this.country = "",
                this.village = "",

                this.freedomData.eat = "";
                this.freedomData.dressing = "";
                this.freedomData.bunkBed = "";
                this.freedomData.visitJohn = "";
                this.freedomData.walk = "";
                this.freedomData.takeBath = "";
                this.freedomData.verdict = "";

                this.research.nursingProtocol = "";
                this.research.standardsCare = "";
                this.research.tcpName = "";
                this.research.tcpSex = "";
                this.research.tcpRelation = "";
                this.research.tcpPhone = "";
                this.research.tcpCondition1 = false;
                this.research.tcpCondition2 = false;
                this.research.tcpCondition3 = false;
                this.research.tcpCondition4 = false;
                this.research.tcpCondition5 = false;
                this.research.scName = "";
                this.research.scSex = "";
                this.research.scDuty = "";
                this.research.scPhone = "";
                this.research.pc = "";
                this.research.pcMessage = "";
                this.research.sca = "";
                this.research.scaMessage = "";
                this.research.livingSituation = "";
                this.research.hygieneStatus = "";
                this.research.checkInStatus = "";
                this.research.checkInStatusMessage = "";
                this.research.disabilityState = "";
                this.research.disabilityType = "";
                this.research.disabilityGrade = "";
                this.research.lowSubsidyTime = "";
                this.research.disabilitySubsidyTime = "";
                this.research.myPhone = "";

                this.imgTypeData1 = [];
                this.imgTypeData2 = [];
                this.imgTypeData3 = [];
                this.imgTypeData4 = [];
                this.imgTypeData5 = [];
                this.imgTypeData6 = [];
                this.imgTypeData7 = [];
                this.imgTypeData8 = [];

                this.imgTypeData9 = {};
                this.imgTypeData10 = {};
            }
        },
        created() {
            if (!getToken()) this.$router.push("/");
        }
    }

</script>

<style>

    /*  公共  */
    .div_button {
        margin-bottom: 60px;
        margin-top: 60px
    }


    .form_button2 {
        margin-left: 10%;
        width: 80%;
    }


    .title_div {
        background: #6cb5ff;
        height: 30px;
        margin-bottom: 15px;
    }

    .title_P {
        margin-left: 10px;
        padding: 3px;
    }


    /*  ------------------ 图片 ------------------ */

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 80px;
        height: 80px;
        line-height: 80px;
        text-align: center;
    }

    .avatar {
        width: 80px;
        height: 80px;
        display: block;
    }


</style>
